<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layer 弹层 - layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">
  <style>
  body{padding: 100px;}
  #photos li{float: left; margin: 0 1px 1px;}
  #photos img{max-height: 38px;}
  </style>
</head>
<body>

<div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary" lay-on="test">Alert</button>
  <button class="layui-btn" lay-on="test2">Confirm</button>
  <button class="layui-btn" lay-on="test3">Msg</button>
  <button class="layui-btn" lay-on="test5">Page</button>
  <button class="layui-btn" lay-on="test6">Iframe</button>
  <button class="layui-btn" lay-on="testLoading">Loading</button>
  <button class="layui-btn" lay-on="test4">Tips</button>
  <button class="layui-btn" lay-on="test7">Prompt</button>
  <button class="layui-btn" lay-on="test8">Tab</button>
  <button class="layui-btn" lay-on="test9">Photo</button>
  <button class="layui-btn" lay-on="test10">Drawer</button>
  <button class="layui-btn" lay-on="testTime">自动关闭</button>
  <a href="https://layui.dev/docs/2/layer/" target="_blank" class="layui-btn">更多例子</a>
</div>

<div id="test11111" style="display: none; padding: 16px;">
  content 指向放置在页面的一段隐藏元素
</div>

<hr><br>

<div class="layui-list">
  <ul class="layui-row" id="photos">
    <li class="list"><img src="https://unpkg.com/outeres/demo/1.jpg" alt="123"></li>
    <li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg"></li>
  </ul>
</div>

<script>
var LAYUI_GLOBAL = {
  // path: '../src/',
  // layerPath: '../release/layer/src/'
};
</script>

<script src="../src/layui.js"></script>

<!-- layer 独立版调试 -->
<script src1="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src1="../release/layer/src/layer.js"></script>

<script>
var runTest = function(run, $, layer){
  if(!run) return;

  var timer = setInterval(function(){
    //location.reload();
  }, 1000);

  layer.alert(123);

  $.ajax({
    url: './all.html'
    ,beforeSend: function(){
      //layer.ready(function(){
        //layer.load();
      //});
    }
    ,success: function(){
      return;
      layer.closeAll('loading', function(){
        setTimeout(function(){
          if($('.layui-layer-loading').length){
            console.error('layer close 异常');
            clearInterval(timer);
          }
        }, 200);
      });
    }
  });
};
window.jQuery && runTest(1, window.jQuery, window.layer);

layui.use(['layer', 'util'], function(layer, util){
  var $ = layui.jquery;
  var util = layui.util;
  //return

  var index = layer.msg('Hello World');
  //layer.close(index);
  //runTest(1, $, layer);


  // 触发事件
  util.on('lay-on', {
    test: function(){
      var icon = -1;
      (function changeIcon(){
        var index = layer.alert('Hi，你好！ 点击确认更换图标', {
          icon: icon,
          shadeClose: true,
          title: icon === -1 ? 'Alert' : ('icon: '+ icon)
        }, changeIcon);
        if(icon++ > 6){
          layer.close(index);
          icon = -1;
        }
      }());
    }
    ,test2: function(){
      layer.confirm('一个询问层的测试示例？', {
        btn: ['确定','关闭'] //按钮
      }, function(){
        layer.msg('第一个回调', {icon: 1});
      }, function(){
        layer.msg('第二个回调', {
          time: 20000, //20s后自动关闭
          btn: ['明白了', '知道了']
        });
      });
    }
    ,test3: function(){
      !0 ? layer.msg('一个常用消息框')
      : layer.msg('一个常用消息框',{closeBtn: 0,time: 0, icon: 16});
    }
    ,test4: function(){
      layer.tips('Hi，我是一个小提示', this, {tips: 1});
    }
    ,test5: function(){
      layer.open({
        title:'自定义页面层',
        type: 1,
        skin: 'layui-layer-border',
        area: ['1000px', '580px'],
        content: $('#test11111'),
        maxmin: true,
        shade: false,
        minStack: false, // 最小化不堆叠在左下角
        id: 'page-1', // 定义 ID，防止重复弹出
        min: function(layero, index){
          layer.msg('阻止了默认的最小化');
          layer.style(index, {top: 'auto', bottom: 0});
          return false;
        }
      });
    }
    ,test6: function(){
      layer.open({
        type: 2,
        content: 'https://www.aliyun.com/activity?userCode=ap0255is',
        area: ['375px', '500px'],
        id: 'iframe-1',
        hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
        maxmin: true
      });
    }
    ,testLoading: function(){
      layer.load(0, {
        time: 5*1000
        //content: '123'
      });
    }
    ,test7: function(){
      layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
        layer.close(index);
        layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
          layer.close(index);
          layer.msg('演示完毕！您的口令：'+ util.escape(pass) +'<br>您最后写下了：'+ util.escape(text));
        });
      });
    }
    ,test8: function(){
      layer.tab({
        area: ['600px', '300px'],
        tab: [{
          title: 'TAB1',
          content: '内容1'
        }, {
          title: 'TAB2',
          content: '内容2'
        }, {
          title: 'TAB3',
          content: '内容3'
        }]
      });
    }
    ,test9: function(){
      layer.photos({
        photos: {
          "data": [{
            "src": "https://unpkg.com/outeres/demo/layer.png"
          }]
        },
        hideFooter: true  // 是否隐藏图片底部栏（v2.8.0 新增）
      });
    }
    ,testTime: function(){
      layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
        time: 5*1000
        ,success: function(layero, index){
          var timeNum = this.time/1000, setText = function(start){
            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
          };
          setText(!0);
          this.timer = setInterval(setText, 1000);
          if(timeNum <= 0) clearInterval(this.timer);
        }
        ,end: function(){
          clearInterval(this.timer);
        }
      });
    }
    ,test10: function(){
      layer.open({
        title:'drawer',
        type: 1,
        offset: 'b',
        anim: 'slideUp', // 从下往上
        area: ['100%', '160px'],
        shade: 0.1,
        shadeClose: true,
        content: $('#test11111'),
        maxmin: true,
      });
    }
  });

  // 相册层
  layer.photos({
    photos: '#photos', // $('#photos')
    // toolbar: false,
    // footer: false
  });

  //动态追加
  $('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');

});
</script>
</body>
</html>
